<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <ul>
        <li v-for="message in messages">{{ message }}</li>
    </ul>
    <message @message-saved="handleMessage"></message>

    <script src="js/vue.min.js"></script>
    <!-- <script src="main.js"></script> -->
	
	<script type="text/javascript">
		Vue.component('message', {
		    template: '<input v-model="message" @keyup.enter="saveMessage">',
		    data: function() {
		        return {
		            message: ''
		        }
		    },
		    methods: {
		        saveMessage: function() {
		            this.$emit('message-saved', this.message)
		
		            this.message = ''
		        }
		    }
		})
		
		new Vue({
		    el: 'body',
		    data: {
		        messages: []
		    },
		    methods: {
		        handleMessage: function(message) {
		            this.messages.push(message)
		        }
		    }
		})
	</script>
</body>
</html>